<template>
    <div>
        <layout-box one="商品管理" two="商品列表">
            <!-- 搜索框 -->
            <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getGoodsList">
               <el-button slot="append" icon="el-icon-search" @click="getGoodsList"></el-button>
           </el-input>
           <!-- 添加商品按钮 -->
           <el-button type="primary" @click="goAddGoods">添加商品</el-button>
           <!-- 商品列表区域 -->
           <el-table :data="goodsList" border stripe>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="商品名称" prop="goods_name" ></el-table-column>
                <el-table-column label="商品价格（元）" prop="goods_price" width="120px"></el-table-column>
                <el-table-column label="商品数量" prop="goods_number" width="85px"></el-table-column>
                <el-table-column label="创建时间" prop="add_time" width="180px">
                    <template slot-scope="scope">
                       {{scope.row.add_time|dateFormat}} 
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="140px">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeGoodsById(scope.row.goods_id)"></el-button>
                    </template>
                </el-table-column>
           </el-table>
           <!-- 分页区域-->
            <el-pagination
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
               :current-page="queryInfo.pagenum"
               :page-sizes="[3, 5, 8, 10]"
               :page-size="queryInfo.pagesize"
               layout="total, sizes, prev, pager, next, jumper"
               :total="total">
            </el-pagination>
        </layout-box>
    </div>
</template>
<script>
export default {
   data() {
      return {
        // 查询商品列表参数
        queryInfo:{
            query:'',
            pagenum:1,
            pagesize:10
        },
        // 商品列表
        goodsList:[],
        // 商品总数
        total:0
      }
   },
   created(){
       this.getGoodsList()
   },
   methods:{
        //获取商品列表数据
       async getGoodsList(){
           const {data:res}=await this.$http.get('goods',{params:this.queryInfo})
        //console.log(res);
           if(res.meta.status!==200) return this.$message.error('获取商品列表失败')
           this.goodsList=res.data.goods
           this.total=res.data.total
           console.log(this.goodsList)
       },
      //监听当前页面大小的变化  
       handleSizeChange(newSize){
       this.queryInfo.pagesize=newSize
       this.getGoodsList()
       },
      //监听当前页面打小
      handleCurrentChange(newNum){
        this.queryInfo.pagenum=newNum
        this.getGoodsList()
      },
    // 根据id删除商品
    async removeGoodsById(goods_id){
        // 弹出确认框
        const delConfirmResult=await this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err)
        console.log(delConfirmResult);
        if(delConfirmResult!=='confirm') return this.$message.info('取消了删除该商品')
        const {data:res}=await this.$http.delete(`goods/${goods_id}`)
        // console.log(res);
        if(res.meta.status!==200) return this.$message.error('删除商品失败')
         this.getGoodsList()
        },
    goAddGoods(){
        this.$router.push('/goods/add')
    }
   },
}
</script>
<style lang='less' scoped>
.el-input{
    width:35%;
    margin-right:15px;
}

</style>
